<template>
  <div class="safety-approve-nfo" :class="{ 'is-details': isSignature }">
    <div class="info-list">
      <template v-if="isSignature">
        <div class="contentList">
          <div class="contentLeft">
            <span class="contentLeftFont">作业证编号：</span>
          </div>
          <div class="contentRight border">
            {{ safeExamineDetail.code }}
          </div>
        </div>
        <div class="contentList">
          <div class="contentLeft">
            <span class="contentLeftFont">申请单位：</span>
          </div>
          <div class="contentRight border">
            {{ form.applyDepartmentName }}
          </div>
        </div>
        <div class="contentList">
          <div class="contentLeft">
            <span class="contentLeftFont">申请人：</span>
          </div>
          <div class="contentRight border">
            {{ form.applyPerson }}
          </div>
        </div>
      </template>
      <div class="contentList">
        <div class="contentLeft">
          <span class="contentLeftFont">作业单位：</span>
        </div>
        <div class="contentRight border">
          <input
            :disabled="isSignature"
            type="text"
            v-model="form.taskPlace"
            placeholder="请输作业单位"
          />
        </div>
      </div>
      <div class="contentList">
        <div class="contentLeft">
          <span class="contentLeftFont">涉及相关单位（部门）：</span>
        </div>
        <div class="contentRight border">
          <input
            :disabled="isSignature"
            type="text"
            v-model="form.relatedUnits"
            placeholder="请输入涉及相关单位（部门）"
          />
        </div>
      </div>
      <div class="contentList">
        <div class="contentLeft">
          <span class="contentLeftFont">断路原因：</span>
        </div>
        <div class="contentRight border">
          <input
            :disabled="isSignature"
            type="text"
            v-model="form.breakReason"
            placeholder="请输入断路原因"
          />
        </div>
      </div>
      <div class="contentList">
        <div class="contentLeft">
          <span class="contentLeftFont">断路开始时间</span>
        </div>
        <div class="contentRight border" @click="selectTime('startTime')">
          <span v-if="form.startTime">
            {{ form.startTime | formatDate("YYYY-MM-DD HH:mm") }}
          </span>
          <span v-else style="color:rgb(111, 111, 119);">
            选择断路开始时间
          </span>
          <x-icon type="ios-arrow-right" fill="#fff" size="24"></x-icon>
        </div>
      </div>
      <div class="contentList">
        <div class="contentLeft">
          <span class="contentLeftFont">断路结束时间</span>
        </div>
        <div class="contentRight border" @click="selectTime('endTime')">
          <span v-if="form.endTime">
            {{ form.endTime | formatDate("YYYY-MM-DD HH:mm") }}
          </span>
          <span v-else style="color:rgb(111, 111, 119);">
            选择断路结束时间
          </span>
          <x-icon type="ios-arrow-right" fill="#fff" size="24"></x-icon>
        </div>
      </div>
      <div class="contentList full">
        <div class="contentLeft">
          <span class="contentLeftFont">断路地段示意图及相关说明：</span>
        </div>
        <div class="contentRight">
          <textarea
            name="userQuestion"
            :disabled="isSignature"
            v-model="form.relevantDescription"
            placeholder="请输入说明"
            class="userQuestion"
            maxlength="200"
          ></textarea>
          <div v-if="form.relevantDescriptionAnnex" class="annex">
            <img
              @click="eventShowImg(form.relevantDescriptionAnnex)"
              :src="form.relevantDescriptionAnnex"
            />
          </div>
          <upload
            v-if="!isSignature"
            :loading="loading"
            :max-count="2"
            :max-size="10 * 1024 * 1024"
            @oversize="oversize"
            @overcount="overcount"
            :file-stream="true"
            @delete="deleteList"
            @afterRead="afterRead($event, 'relevantDescriptionAnnex')"
          ></upload>
        </div>
      </div>
    </div>

    <div class="info-list">
      <div class="contentList">
        <div class="contentLeft">
          <span class="contentLeftFont">安全教育人：</span>
        </div>
        <div class="contentRight border">
          <div
            class="select-user"
            @click="eventPersonSelect('leader', 'safetyPerson')"
          >
            <span v-if="form.safetyPerson">{{ form.safetyPerson }}</span>
            <span v-else style="color: rgb(111, 111, 119);">请选择</span>
          </div>
          <x-icon type="ios-arrow-right" fill="#fff" size="24"></x-icon>
        </div>
      </div>
      <div class="contentList">
        <div class="contentLeft">
          <span class="contentLeftFont">危害辨识：</span>
        </div>
        <div class="contentRight border">
          <iu-selector
            class="selector"
            :placeholder="form.hazardIdentification.join(' , ')"
            popupTitle="危害辨识"
            multiple
            :disabled="isSignature"
            :initSelect="form.hazardIdentification"
            @selected="form.hazardIdentification = $event"
            :options="hazardOption"
          ></iu-selector>
        </div>
      </div>
    </div>
    <div class="info-list">
      <div class="contentList">
        <div class="contentLeft">
          <span class="contentLeftFont">安全措施</span>
        </div>
      </div>
      <div class="contentList full">
        <div class="contentRight" v-if="!isSignature">
          <div data-list="1" class="checkbox-list">
            1. 作业前，制定交通组织方案（附后），并已通知相关部门或单位。
          </div>
          <div data-list="2" class="checkbox-list">
            2.
            作业前，在断路的路口和相关道路上设置交通警示标志，在作业区附近设置路栏、道路作业警示灯、导向标等交通警示设施。
          </div>
          <div data-list="3" class="checkbox-list">
            3. 夜间作业设置警示灯。
          </div>
          <label data-list="checkboxList" class="checkbox-list">
            <div>
              4. 其他安全措施：<input
                type="text"
                v-model="form.safetyMeasuresOther"
                :disabled="isSignature"
                class="input-text"
                style="width: 100%;text-align: left;"
              />
            </div>
          </label>
          <div class="checkbox-list">
            <div class="contentLeft">
              <span class="contentLeftFont">编制人：</span>
            </div>
            <div class="contentRight border">
              <div
                class="select-user"
                @click="
                  eventPersonSelect(
                    'leader',
                    'safetyMeasuresPerson',
                    1,
                    'person'
                  )
                "
              >
                <span v-if="form.safetyMeasuresPerson[1]">{{
                  form.safetyMeasuresPerson[1].person
                }}</span>
                <span v-else style="color: rgb(111, 111, 119);">请选择</span>
              </div>
              <x-icon type="ios-arrow-right" fill="#fff" size="24"></x-icon>
            </div>
          </div>
          <div class="checkbox-list">
            <div class="contentLeft">
              <span class="contentLeftFont">确认人：</span>
            </div>
            <div class="contentRight border">
              <div
                class="select-user"
                @click="
                  eventPersonSelect(
                    'leader',
                    'safetyMeasuresPerson',
                    0,
                    'person'
                  )
                "
              >
                <span v-if="form.safetyMeasuresPerson[0]">{{
                  form.safetyMeasuresPerson[0].person
                }}</span>
                <span v-else style="color: rgb(111, 111, 119);">请选择</span>
              </div>
              <x-icon type="ios-arrow-right" fill="#fff" size="24"></x-icon>
            </div>
          </div>
        </div>
        <div class="contentRight" v-else>
          <div
            class="checkbox-list"
            v-for="(item, index) in form.safetyMeasuresContent || []"
            :key="index"
          >
            {{ item }}
          </div>
        </div>
      </div>
    </div>
    <template v-if="1">
      <div class="info-list">
        <div
          class="contentList full"
          v-for="(item, index) in acceptancePersonData"
          :key="'acceptance' + index"
        >
          <div class="contentLeft">
            <span class="contentLeftFont">{{ item.name }}</span>
          </div>
          <div class="contentRight border">
            <div
              class="select-user"
              @click="
                eventPersonSelect('leader', 'acceptancePerson', index, 'person')
              "
            >
              <span
                v-if="
                  form.acceptancePerson[index] &&
                    form.acceptancePerson[index].person
                "
              >
                {{ form.acceptancePerson[index].person }}
              </span>
              <span v-else style="color: rgb(111, 111, 119);">请选择</span>
            </div>
            <div class="select-user-right">
              <x-icon type="ios-arrow-right" fill="#fff" size="24"></x-icon>
              <!-- <label>签字顺序：</label>
              <input
                v-model.number="form.acceptancePerson[index].sequence"
                maxlength="1"
                class="esign-sort"
                type="text"
              /> -->
            </div>
          </div>
        </div>
      </div>
    </template>
    <template v-else>
      <div
        class="info-list"
        v-for="(item, index) in acceptancePerson"
        :key="'acceptance' + index"
      >
        <div class="contentList full">
          <div class="contentLeft">
            <span class="contentLeftFont">
              {{
                acceptancePersonData[index] && acceptancePersonData[index].name
              }}
            </span>
          </div>
          <div class="contentRight">
            <div>
              {{ item.userName }}
            </div>
          </div>
        </div>
        <!-- <template v-if="item.checkState != null">
          <div class="contentList full">
            <div class="contentLeft">
              <span class="contentLeftFont">
                审批时间：
              </span>
            </div>
            <div class="contentRight">
              <div>
                {{ item.signatureTime | formatDate }}
              </div>
            </div>
          </div>
          <div class="contentList full">
            <div class="contentLeft">
              <span class="contentLeftFont">
                审批结果：
              </span>
            </div>
            <div class="contentRight">
              <div>
                {{ item.checkState ? "通过" : "不通过" }}
              </div>
            </div>
          </div>
          <div class="contentList full">
            <div class="contentLeft">
              <span class="contentLeftFont">
                审批描述：
              </span>
            </div>
            <div class="contentRight">
              <div>
                {{ item.content }}
              </div>
            </div>
          </div>
        </template> -->
      </div>
    </template>
    <div class="processWrap">
      <template v-if="!isSignature && (isEdit || !safeExamineDetail.id)">
        <div>
          <button @click="back">取消</button>
        </div>
        <div>
          <button @click="eventConfirm(1)">保存草稿</button>
        </div>
        <div>
          <button @click="eventConfirm(4)">提交</button>
        </div>
      </template>
      <template v-if="isSignature && isEsign">
        <div>
          <button @click="eventReject">驳回</button>
        </div>
        <div>
          <button @click="eventEsignConfirm">审批通过</button>
        </div>
      </template>
    </div>
    <div class="esign-fullscreen" v-if="esignShow">
      <div class="info-list">
        <div class="contentList full">
          <div class="contentLeft">
            <span class="notNull" v-if="confirmRejectTag">*</span>
            <span class="contentLeftFont">描述</span>
          </div>
          <div class="contentRight">
            <textarea
              name="userQuestion"
              v-model="esignContent"
              placeholder="请输入描述"
              class="userQuestion"
              maxlength="200"
            ></textarea>
          </div>
        </div>
      </div>
      <div class="info-list" v-if="!confirmRejectTag">
        <div class="contentList full">
          <div class="contentLeft">
            <span class="notNull">*</span>
            <span class="contentLeftFont">签字</span>
          </div>
          <div class="contentRight">
            <vue-esign ref="esign" :width="800" :height="600" bgColor="#fff" />
          </div>
        </div>
      </div>
      <div class="processWrap" v-if="buttonShow">
        <template>
          <div>
            <button @click="handleShowCancel">取消</button>
          </div>
          <div>
            <button @click="handleShowConfirm">保存</button>
          </div>
        </template>
      </div>
    </div>
    <confirm
      class="deviceDetailManage"
      v-model="confirmShow"
      title="提示"
      :close-on-confirm="false"
      @on-cancel="confirmShow = false"
      @on-confirm="handleTipsConfirm"
    >
      <p style="text-align:center;">
        确认要{{ confirmRejectTag ? "驳回" : "通过" }}该审批吗？
      </p>
    </confirm>

    <selectUser
      :show.sync="selectUserShow"
      type="select"
      :user-type="selectUserType"
      :initDepartmentId="form.applyDepartmentId || ''"
      @selected="handlePersonSelected"
    ></selectUser>
  </div>
</template>
<script>
import AssignmentsDataMixin from "./mixin";
export default {
  name: "donghuo",
  mixins: [AssignmentsDataMixin],
  data() {
    return {
      acceptancePersonData: [
        { name: "申请单位验收人：" },
        { name: "作业单位验收人：" },
        { name: "有关水、电、汽、工艺、设备、消防、安全等部门验收人：" },
        { name: "审批部门验收人：" },
        { name: "完工验收人：" }
      ]
    };
  },
  mounted() {}
};
</script>
